<template>
  <section class="iTable">
    <div class="operate" v-if="pathName != '/login'&&pathName != '/register'">
      <ul>
        <li class="list">
          <span>
            <i class="el-icon-s-operation"></i>
          </span>
        </li>
        <li class="new_build" :class="activeTab == 1 ? 'active' : ''" @click="changeTab(1)">
          <span>
            <i class="el-icon-circle-plus"></i>
            <p>新建</p>
          </span>
        </li>
        <li class="file" :class="activeTab == 2 ? 'active' : ''" @click="changeTab(2)">
          <span>
            <i class="el-icon-folder"></i>
            <p>文件</p>
          </span>
        </li>
        <li class="lately" :class="activeTab == 3 ? 'active' : ''" @click="changeTab(3)">
          <span>
            <i class="el-icon-time"></i>
            <p>最近</p>
          </span>
        </li>
        <li class="star" :class="activeTab == 4 ? 'active' : ''" @click="changeTab(4)">
          <span>
            <i class="el-icon-collection-tag"></i>
            <p>星标</p>
          </span>
        </li>
      </ul>
    </div>
    <div class="home-router" :class="(pathName != '/login'&&pathName != '/register' )? 'ml' : ''">
      <router-view></router-view>
    </div>
  </section>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeTab: 2,
      pathName: '/login'
    };
  },
  created() {
    this.getPath();
    this.pathName = this.$route.path;
  },
  watch: {
    $route: "getPath"
  },
  methods: {
    getPath() {
      if (this.$route.path == "/newlybuild") {
        this.activeTab = 1;
      } else if (this.$route.path == "/index") {
        this.activeTab = 2;
      } else if (this.$route.path == "/lately") {
        this.activeTab = 3;
      } else if (this.$route.path == "/star") {
        this.activeTab = 4;
      }
    },
    signIn() {
      this.$router.push("/login");
    },
    changeTab(index) {
      this.activeTab = index;
      if (index == 1) {
        this.$router.push("/newlybuild");
      }
      if (index == 2) {
        this.$router.push("/index");
      }
      if (index == 3) {
        this.$router.push("/lately");
      }
      if (index == 4) {
        this.$router.push("/star");
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../public/global.css"; //全局样式
@import "../public/iTable.less"; //首页样式
</style>
